<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>{$title|default='电商服务系统'}</title>
    <link rel="icon" href="/favicon.ico" type="image/ico">
    <link href="/admin/css/bootstrap.min.css" rel="stylesheet">
    <link href="/admin/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/admin/css/style.min.css" rel="stylesheet"><!--对话框-->
    <link rel="stylesheet" href="/admin/js/jconfirm/jquery-confirm.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-rc.0/css/select2.min.css" rel="stylesheet">
</head>

<body>
    <div class="lyear-layout-web">
        <div class="lyear-layout-container">
            <!--左侧导航-->
            <aside class="lyear-layout-sidebar">

                <!-- logo -->
                <div id="logo" class="sidebar-header">
                    <a href="/admin/"><img src="/admin/images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
                </div>
                <div class="lyear-layout-sidebar-scroll">

                    <nav class="sidebar-main">
                        <ul class="nav nav-drawer">
                            {foreach $menus as $menu}
                                <li class="nav-item {$menu.active ? 'active' : ''} {$menu.submenu ? 'nav-item-has-subnav' : ''} {if isset($menu.submenu) AND $menu.active} open{/if}">
                                    {if isset($menu['submenu'])}
                                    <a href="javascript:void(0)"><i class="mdi {$menu.icon}"></i> {$menu.name}</a>
                                        <ul class="nav nav-subnav ">
                                            {foreach $menu.submenu as $submenu}
                                                <li class="{$submenu.active ? 'active' : ''}">
                                                    <a href="/admin/{$submenu.index}"> {$submenu.name}</a>
                                                </li>
                                            {/foreach}
                                        </ul>
                                    {else/}
                                    <a href="/admin/{$menu.index}"><i class="mdi {$menu.icon}"></i> {$menu.name}</a>
                                    {/if}
                                </li>
                            {/foreach}
                        </ul>
                    </nav>

                    <!-- <div class="sidebar-footer">
                        <p class="copyright">Copyright &copy; 2021. <a target="_blank"
                                href="https://www.mtit.net/">IT书包</a> All rights reserved.</p>
                    </div> -->
                </div>

            </aside>
            <!--End 左侧导航-->

            <!--头部信息-->
            <header class="lyear-layout-header">

                <nav class="navbar navbar-default">
                    <div class="topbar">

                        <div class="topbar-left">
                            <div class="lyear-aside-toggler">
                                <span class="lyear-toggler-bar"></span>
                                <span class="lyear-toggler-bar"></span>
                                <span class="lyear-toggler-bar"></span>
                            </div>
                            <span class="navbar-page-title"> {$request->title|default="后台管理系统"} </span>
                        </div>

                        <ul class="topbar-right">
                            <li class="dropdown dropdown-profile">
                                <a href="javascript:void(0)" data-toggle="dropdown">
                                    <span>{$user.username} <span class="caret"></span></span>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    
                                    <li>
                                        <a data-modal="{:url('index/repass')}" data-title="修改密码">
                                            <i class="mdi mdi-lock-outline"></i>修改密码
                                        </a>
                                    </li>
                                    <li>
                                        <a data-action="{:url('index/refresh')}">
                                            <i class="mdi mdi-refresh"></i>刷新权限
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="{:url('index/logout')}">
                                            <i class="mdi mdi-logout-variant"></i>退出登录
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <!--切换主题配色-->
                            <li class="dropdown dropdown-skin">
                                <span data-toggle="dropdown" class="icon-palette"><i class="mdi mdi-palette"></i></span>
                                <ul class="dropdown-menu dropdown-menu-right" data-stopPropagation="true">
                                    <li class="drop-title">
                                        <p>主题</p>
                                    </li>
                                    <li class="drop-skin-li clearfix">
                                        <span class="inverse">
                                            <input type="radio" name="site_theme" value="default" id="site_theme_1"
                                                checked>
                                            <label for="site_theme_1"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="site_theme" value="dark" id="site_theme_2">
                                            <label for="site_theme_2"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="site_theme" value="translucent" id="site_theme_3">
                                            <label for="site_theme_3"></label>
                                        </span>
                                    </li>
                                    <li class="drop-title">
                                        <p>LOGO</p>
                                    </li>
                                    <li class="drop-skin-li clearfix">
                                        <span class="inverse">
                                            <input type="radio" name="logo_bg" value="default" id="logo_bg_1" checked>
                                            <label for="logo_bg_1"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="logo_bg" value="color_2" id="logo_bg_2">
                                            <label for="logo_bg_2"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="logo_bg" value="color_3" id="logo_bg_3">
                                            <label for="logo_bg_3"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="logo_bg" value="color_4" id="logo_bg_4">
                                            <label for="logo_bg_4"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="logo_bg" value="color_5" id="logo_bg_5">
                                            <label for="logo_bg_5"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="logo_bg" value="color_6" id="logo_bg_6">
                                            <label for="logo_bg_6"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="logo_bg" value="color_7" id="logo_bg_7">
                                            <label for="logo_bg_7"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="logo_bg" value="color_8" id="logo_bg_8">
                                            <label for="logo_bg_8"></label>
                                        </span>
                                    </li>
                                    <li class="drop-title">
                                        <p>头部</p>
                                    </li>
                                    <li class="drop-skin-li clearfix">
                                        <span class="inverse">
                                            <input type="radio" name="header_bg" value="default" id="header_bg_1"
                                                checked>
                                            <label for="header_bg_1"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="header_bg" value="color_2" id="header_bg_2">
                                            <label for="header_bg_2"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="header_bg" value="color_3" id="header_bg_3">
                                            <label for="header_bg_3"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="header_bg" value="color_4" id="header_bg_4">
                                            <label for="header_bg_4"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="header_bg" value="color_5" id="header_bg_5">
                                            <label for="header_bg_5"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="header_bg" value="color_6" id="header_bg_6">
                                            <label for="header_bg_6"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="header_bg" value="color_7" id="header_bg_7">
                                            <label for="header_bg_7"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="header_bg" value="color_8" id="header_bg_8">
                                            <label for="header_bg_8"></label>
                                        </span>
                                    </li>
                                    <li class="drop-title">
                                        <p>侧边栏</p>
                                    </li>
                                    <li class="drop-skin-li clearfix">
                                        <span class="inverse">
                                            <input type="radio" name="sidebar_bg" value="default" id="sidebar_bg_1"
                                                checked>
                                            <label for="sidebar_bg_1"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="sidebar_bg" value="color_2" id="sidebar_bg_2">
                                            <label for="sidebar_bg_2"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="sidebar_bg" value="color_3" id="sidebar_bg_3">
                                            <label for="sidebar_bg_3"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="sidebar_bg" value="color_4" id="sidebar_bg_4">
                                            <label for="sidebar_bg_4"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="sidebar_bg" value="color_5" id="sidebar_bg_5">
                                            <label for="sidebar_bg_5"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="sidebar_bg" value="color_6" id="sidebar_bg_6">
                                            <label for="sidebar_bg_6"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="sidebar_bg" value="color_7" id="sidebar_bg_7">
                                            <label for="sidebar_bg_7"></label>
                                        </span>
                                        <span>
                                            <input type="radio" name="sidebar_bg" value="color_8" id="sidebar_bg_8">
                                            <label for="sidebar_bg_8"></label>
                                        </span>
                                    </li>
                                </ul>
                            </li>
                            <!--切换主题配色-->
                        </ul>

                    </div>
                </nav>

            </header>
            <!--End 头部信息-->

            <!--页面主要内容-->
            <main class="lyear-layout-content">
                {block name="content"}{/block}
            </main>
            <!--End 页面主要内容-->
        </div>
    </div>

    <script type="text/javascript" src="/admin/js/jquery.min.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script> -->
    <script type="text/javascript" src="/admin/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/admin/js/perfect-scrollbar.min.js"></script>
    <script type="text/javascript" src="/admin/js/main.min.js"></script>
    <script src="/admin/js/jconfirm/jquery-confirm.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>
    <script>
        initForm = function () {
            $('select').select2();
        }
        // 图片预览
        $('img[data-image-preview]').on('click',function(e){
            var src = e.target.getAttribute('src');
            $.confirm({
                title: '图片预览',
                content: `<img src="${src}"  />`,
                type: 'green',
                typeAnimated: true,
                buttons: {
                    close: {
                        text: '关闭'
                    }
                }
            });
            $("<img/>").attr("src", src).on('load',function(ee) {
                // console.log(ee)
                var height = parseInt(ee.target.height / (ee.target.width / 400))
                console.log(height)
                layer.open({
                    type: 1,
                    title: false,
                    anim: 2,
                    area:["400px",height+"px"],
                    shadeClose:true,
                    content: `<img src="${src}" width="400">`, //iframe的url，no代表不显示滚动条
                })
            });
        })
        // modal弹窗
        $('a[data-modal]').on('click',(e)=>{
            var ele = $(e.currentTarget);
            var url = ele.attr('data-modal'),title = ele.attr('data-title'),width = ele.attr('data-width')||'400px';
            doRequest(url,{},'GET',function(data){
                if(typeof data  == "string"){
                    $.confirm({
                        title,
                        content: data,
                        type:'blue',
                        buttons: {
                            formSubmit:{
                                text: '提交',
                                btnClass: 'btn-blue',
                                action: function (data) {
                                    this.$content.find('form').submit()
                                }
                            },
                            cancel: {
                                text: '取消'
                            },
                        },
                        onContentReady: function () {
                            var jc = this;
                            initForm();
                            this.$content.find('form').on('submit', function (e) {
                                e.preventDefault();
                                let url = $(e.currentTarget).attr('action');
                                let data = $(e.currentTarget).serializeArray();
                                doRequest(url,data,'POST',function(data){
                                    if(data.code == 1){
                                        $.confirm({
                                            title: '执行成功',
                                            content: data.msg||'操作成功',
                                            type: 'green',
                                            buttons: {
                                                close: {
                                                    text: '关闭',
                                                    btnClass: 'btn-green',
                                                    action: function () {
                                                        location.reload();
                                                    }
                                                }
                                            }
                                        });
                                    }else{
                                        $.confirm({
                                            title: '执行错误',
                                            content: data.msg||'操作失败',
                                            type: 'red',
                                            typeAnimated: true,
                                            buttons: {
                                                close: {
                                                    text: '关闭'
                                                }
                                            }
                                        });
                                    }                
                                })
                                return false;
                            });
                        }
                    });
                }else{
                    $.confirm({
                        title: data.code==1?'执行成功':'执行错误',
                        content: data.msg||'操作失败',
                        type: data.code==1?'green':'red',
                        typeAnimated: true,
                        buttons: {
                            close: {
                                text: '关闭'
                            }
                        }
                    });
                }
            })
        })
        // post按钮
        $('a[data-action]').on('click',(e)=>{
            var ele = $(e.currentTarget);
            var url = ele.attr('data-action')
            ,confirm = ele.attr('data-confirm') || "确定执行此操作吗？"
            ,param = ele.attr('data-value')
            ,token = ele.attr('data-crsf');
            $.confirm({
                title: '提示',
                content: confirm,
                buttons: {
                    formSubmit: {
                        text: '确定',
                        btnClass: 'btn-blue',
                        action: function () {
                            var postData = makePostData(param);
                            postData._token_ = token;
                            doRequest(url,postData,'POST',(result)=>{
                                if(result.code == 1){
                                    $.confirm({
                                        title: '执行成功',
                                        content: result.msg||'操作成功',
                                        type: 'green',
                                        typeAnimated: true,
                                        buttons: {
                                            close: {
                                                text: '关闭',
                                                action:function(){
                                                    window.location.reload()
                                                }
                                            }
                                        }
                                    })
                                }else{
                                    $.confirm({
                                        title: '执行错误',
                                        content: result.msg||'操作失败',
                                        type: 'red',
                                        typeAnimated: true,
                                        buttons: {
                                            close: {
                                                text: '关闭',
                                            }
                                        }
                                    })
                                }
                            });
                            return;
                        }
                    },
                    cancel: {
                        text: '取消'
                    }
                }
            })
        })
    
        // 表单自动提交
        
        function makePostData(param){
            if(!param) return {}
            var pstr   = param.split('&');
            var postData = {}
            for (var i = pstr.length - 1; i >= 0; i--) {
                var tep = pstr[i].split("=");
                postData[tep[0]] = tep[1]
            }
            return postData;
        }
        function doRequest(url,data,method,callback){
            $.ajax({
                method,
                url,
                data,
                success: function(data){
                    callback(data)
                },
                error:function(error){
                    $.confirm({
                        title: '网络错误',
                        content: error.status,
                        type: 'red',
                        typeAnimated: true,
                        buttons: {
                            close: {
                                text: '关闭'
                            }
                        }
                    });
                }
            })
        }
        // 日期区间
        $('input[data-date-range]').each((idx,elem)=>{
            laydate.render({
                elem: elem,
                range: true,
                max: "{:date('Y-m-d')}"
            });
            $(elem).css('min-width',"200px");
        })
        // 日期输入
        $('input[data-date-input]').each((idx,elem)=>{
            laydate.render({
                elem: elem,
                max: "{:date('Y-m-d')}"
            });
            $(elem).css('min-width',"200px");
        })
        initForm()
    </script>
    {block name="script"}
    {/block}
</body>

</html>